<template>
  <div class="h5-customer-status">
    <div class="status-card">
      <div class="card-header">
        <span class="title">客户进度</span>
      </div>
      
      <div class="status-content">
        <div class="steps-container">
          <div 
            v-for="(step, index) in stepsList" 
            :key="index"
            class="step-item"
            :class="{
              'active': (step.id < CustomerValue?.followUpProgress && step.id > -1) || currentStepId == step.id,
              'clickable': CustomerValue.followUpProgress != 9 && CustomerValue.followUpProgress != -1
            }"
            @click="handleStep(step)"
          >
            <div class="step-circle">
              <el-icon v-if="step.id === 9"><Trophy /></el-icon>
              <el-icon v-else-if="step.id === -1"><Close /></el-icon>
              <span v-else>{{ index + 1 }}</span>
            </div>
            <div class="step-label">{{ step.value }}</div>
            <div 
              v-if="index < stepsList.length - 1" 
              class="step-line"
              :class="{ 'active': step.id < CustomerValue?.followUpProgress }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as CustomerApi from '@/api/crm/customer'
import { Trophy, Close } from '@element-plus/icons-vue'

const props = defineProps({
  CustomerValue: Object
})
const emit = defineEmits(['getCustomerValue'])

const stepsList = reactive([
  {
    id: 0,
    value: '待跟进'
  },
  {
    id: 1,
    value: '客户跟进'
  },
  {
    id: 2,
    value: '创建商机'
  },
  {
    id: 3,
    value: '创建合同'
  },
  {
    id: 4,
    value: '合同回款'
  },
  {
    id: 9,
    value: '赢单'
  },
  {
    id: -1,
    value: '输单'
  }
])

const currentStepId = ref('')

const handleStep = (item) => {
  if (props.CustomerValue.followUpProgress == 9 || props.CustomerValue.followUpProgress == -1)
    return
    
  ElMessageBox.confirm(
    `确定要将客户进度修改为：《${item.value}》吗？`, 
    '提示', 
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    }
  )
    .then(async () => {
      const obj = JSON.parse(JSON.stringify(props.CustomerValue))
      obj.followUpProgress = item.id
      delete obj.labelList
      await CustomerApi.updateCustomer(obj)
      currentStepId.value = item.id
      ElMessage.success('操作成功')
      emit('getCustomerValue')
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.h5-customer-status {
  margin-bottom: 8px;
  
  .status-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    
    .card-header {
      padding: 16px;
      background: #f8f9fa;
      border-bottom: 1px solid #ebeef5;
      
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
    }
    
    .status-content {
      padding: 20px 16px;
      
      .steps-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .step-item {
          display: flex;
          align-items: center;
          position: relative;
          padding: 8px 0;
          
          &.clickable {
            cursor: pointer;
            
            &:hover {
              .step-circle {
                transform: scale(1.1);
              }
            }
          }
          
          .step-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #f0f0f0;
            color: #909399;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
            flex-shrink: 0;
            margin-right: 12px;
            
            .el-icon {
              font-size: 16px;
            }
          }
          
          .step-label {
            flex: 1;
            font-size: 14px;
            color: #606266;
            font-weight: 500;
          }
          
          .step-line {
            position: absolute;
            left: 15px;
            top: 40px;
            width: 2px;
            height: 24px;
            background: #e4e7ed;
            transition: all 0.3s;
          }
          
          &.active {
            .step-circle {
              background: #409eff;
              color: #fff;
            }
            
            .step-label {
              color: #409eff;
            }
            
            .step-line.active {
              background: #409eff;
            }
          }
          
          // 赢单样式
          &:nth-child(6).active {
            .step-circle {
              background: #67c23a;
            }
            
            .step-label {
              color: #67c23a;
            }
          }
          
          // 输单样式
          &:nth-child(7).active {
            .step-circle {
              background: #f56c6c;
            }
            
            .step-label {
              color: #f56c6c;
            }
          }
          
          // 最后一个不显示连线
          &:last-child .step-line {
            display: none;
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 480px) {
  .h5-customer-status {
    .status-card {
      .status-content {
        padding: 16px 12px;
        
        .steps-container {
          gap: 12px;
          
          .step-item {
            .step-circle {
              width: 28px;
              height: 28px;
              font-size: 12px;
              margin-right: 10px;
            }
            
            .step-label {
              font-size: 13px;
            }
            
            .step-line {
              left: 13px;
              height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>